<template>
	<el-card>
		<!-- 搜索 -->
		<el-form :model="searchData" inline ref="searchFormRef" v-resize="searchResize">
			<el-form-item label="标题" prop="title">
				<el-input v-model="searchData.title" clearable placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="state">
				<el-select v-model="searchData.state" clearable placeholder="" style="wdith:100%">
					<el-option :value="1" label="发布"></el-option>
					<el-option :value="0" label="未发布"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button icon="el-icon-search" type="primary" size="small" @click="searchClick">搜索</el-button>
				<el-button icon="el-icon-refresh" size="small" @click="resetClick">重置</el-button>
				<el-button icon="el-icon-plus" type="success" size="small" @click="addShowClick">新增</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格渲染 -->
		<YwTable ref="tableRef" :searchData="searchData" :tableProps="tableProps" api="appTongzhiFindAllByPage">
			<el-table-column slot="table_oper" label="操作">
				<template v-slot="scope">
					<el-button type="text" icon="el-icon-edit" @click="editShowClick(scope.row)">修改</el-button>
					<el-button type="text" icon="el-icon-delete" @click="deleteClick(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</YwTable>

		<!-- 添加/修改 -->
		<YwDialog @confirm="confirmClick" width="800px" ref="ywDialogRef" title="添加/修改">
			<template slot="form">
				<el-form :model="curData" ref="curFormRef" label-width="80px" :show-message="false">
					<el-form-item label="通知标题" prop="title" required>
						<el-input v-model="curData.title" placeholder="" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="通知状态" prop="state" required>
						<el-select v-model="curData.state" placeholder="" style="wdith:100%">
							<el-option :value="1" label="发布"></el-option>
							<el-option :value="0" label="未发布"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="内容类型" prop="contentType" required>
						<el-select v-model="curData.contentType" placeholder="" style="wdith:100%">
							<el-option :value="1" label="无内容"></el-option>
							<el-option :value="2" label="富文本"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="通知内容" prop="content" v-if="curData.contentType == 2">
						<YwEditor rootPath="app/tongzhi" ref="yeEditorAddRef" v-model="curData.content"></YwEditor>
					</el-form-item>
				</el-form>
			</template>
		</YwDialog>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				searchData: {
					pageSize: 10,
					pageNum: 1,
					state: null,
					title: null,
				},
				tableProps: [
					{
						label: "标题",
						prop: "title"
					},
					{
						label: "内容类型",
						prop: "contentType",
						type: "tag",
						result: [{
								code: 1,
								type: "primary",
								text: "无"
							},
							{
								code: 2,
								type: "success",
								text: "富文本"
							},
						],
					},
					{
						type: "yulan",
						label: "预览",
						prop: "content"
					},
					{
						label: "状态",
						prop: "state",
						type: "tag",
						result: [{
								code: 1,
								type: "primary",
								text: "发布"
							},
							{
								code: 0,
								type: "info",
								text: "未发布"
							},
						],
					},
					{
						label: "操作时间",
						prop: "createTime"
					},
				],
				curData: {
					title: null,
					state: 0,
					content: "",
					contentType: 1
				},
			};
		},
		mounted() {
			this.$nextTick(()=>{
				this.searchClick()
			})
		},
		methods: {
			//设置表格高度
			searchResize(data) {
				this.$refs.tableRef.refreshSize(data)
			},
			//搜索按钮
			searchClick() {
				this.$refs.tableRef.shuaxin(this.searchData)
			},
			//添加
			confirmClick() {
				let data = JSON.parse(JSON.stringify(this.curData))
				this.$refs.curFormRef.validate(async (valid) => {
					if (valid) {
						if (this.$common.isBlank(data.id)) {
							await this.$api.appTongzhiAdd(data)
						} else {
							await this.$api.appTongzhiEdit(data);
						}
						this.$refs.ywDialogRef.close()
						this.searchClick()
					}
				});
			},
			//删除
			deleteClick(row) {
				this.$common.msgBoxDel(()=>{
					this.$api.appTongzhiDelByIds(row.id).then(res => {
						this.searchClick();
					});
				})
			},
			//重置按钮
			resetClick() {
				this.$refs.searchFormRef.resetFields();
				this.searchClick()
			},
			//新增
			addShowClick() {
				this.curData = {
			       title: null,
			       state: 0,
			       content: "",
			       contentType: 1
			    }
				this.$refs.ywDialogRef.open()
			},
			//修改
			editShowClick(row) {
				let data = JSON.parse(JSON.stringify(row))
				this.curData = data
				this.$refs.ywDialogRef.open()
			}
		},
	};
</script>

<style lang="scss" scoped>
	/deep/ .avatar-uploader .el-upload {
		height: 130px;
		width: 200px;
		border: 1px dashed #d9d9d9;
		border-radius: unset;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		height: 130px;
		width: 200px;
		line-height: 130px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
